<template>
  <div class="form-modal">
    <a-modal
      title="更换手术室"
      :width="880"
      style="top: 50px;"
      :visible="visible"
      @cancel="handleCancel"
      @ok="submit"
    >
      <a-spin :spinning="spinning">
        <a-form :form="form" layout="vertical" :selfUpdate='true'>
          <a-row :gutter="12">
            <a-col :span="8">姓名：{{ target_room.name }}</a-col>
            <a-col :span="8">卡号：{{ target_room.cardNo }}</a-col>
            <a-col :span="8">档案号：{{ target_room.cardNo }}</a-col>
          </a-row>
          <div style="font-weight: bold;margin-top: 35px;color: #000000;margin-bottom: 15px;">待手术项目列表</div>
          <a-row :gutter="12">
            <a-col :span="8">项目名称：{{ row_record.itemName }}</a-col>
            <a-col :span="8">主诊医生：{{ row_record.mainDr }}</a-col>
          </a-row>
          <div style="font-weight: bold;margin-top: 35px;color: #000000;margin-bottom: 15px;">手术信息</div>
          <a-row :gutter="12" type="flex" align="middle">
            <a-col :span="11" >
              <a-form-item label="当前手术室" has-feedback >
                <a-select
                  :disabled="true"
                  :showSearch="true"
                  option-filter-prop="children"
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['oldRoomId',{initialValue:target_room.roomid,rules: [{ required: true, message: '手术室名称！' }]}]"
                  placeholder="选择，搜索"
                >
                  <a-select-option
                    v-for="item in roomList"
                    :key="item.roomid"
                    :label="item.roomName"
                    :value="item.roomid"
                  >{{ item.roomName }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="2" >
              <a-icon type="swap" style="font-size: 32px;display: block;margin: 0 auto;" />
            </a-col>
            <a-col :span="11" >
              <a-form-item label="新手术室">
                <a-select
                  :showSearch="true"
                  option-filter-prop="children"
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['newRoomId',{rules: [{ required: true, message: '请选择新手术室！' }]}]"
                  placeholder="选择，搜索"
                >
                  <a-select-option
                    v-for="item in roomList"
                    :key="item.roomid"
                    :label="item.roomName"
                    :value="item.roomid"
                  >{{ item.roomName }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-modal>
  </div>

</template>

<script>
import { form_type } from './static/js'
import { surgicalRoomList,switchOperate } from '@/api/workstation/doctor'

export default {
  data () {
    return {
      form_type:form_type,
      row_record :{},
      target_room : {},
      spinning:false,
      visible:false,
      confirmLoading:false,
      form: this.$form.createForm(this),
      details:{},
      ConsultationAppeal: [],
      checkbox_value:[],
      allHisUser: {}, //全员员工
      submit_params:{},
      roomList:[]
    }
  },
  created() {
    this.getList()
  },
  methods: {

    show (target_room) {
      this.visible = true
      this.form.resetFields()
      console.log('target_room：',target_room)
      this.target_room = target_room
    },
    /**
     * 获取列表
     * */
    getList(){
      surgicalRoomList().then(res => {
        this.roomList = res.rows
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.$emit('cancelRegister')
      this.visible = false
    },
    /**
     选择人员触发
     * */
    select_search(value,field){
      for(const item of this.allHisUser.userList){
        if(value == item.id){
          console.log('111',value,field,item)
          this.submit_params[field]=item.name
          break
        }
      }
    },
    /**
     提交表单
     * */
    submit(){
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (errors) {
          console.log('表单校验未通过111')
          this.confirmLoading=false
          return
        }
        values.treatId = this.target_room.treatId
        for(const item of this.roomList){
          if(item.roomid == values.newRoomId){
            values.newRoomName=item.roomName
            break
          }
        }
        console.log('values',values)
        switchOperate(values).then(res=>{
          console.log('更换手术室',res)
          if(res.code==200){
            this.$message.success( res.message)
            this.visible = false
            this.$emit('success')
          }else{
            this.$message.info(res.message)
          }
        }).finally(()=>{
          this.confirmLoading = false
        })
      })

    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-modal-body{
  padding-bottom: 0px;
}
.col-form-item{
  padding: 0 4px  20px;
}
/deep/ .ant-modal-footer{
  border-top: none !important;
}

/deep/ .ant-form-item-control {
  width: 100%;
}
/deep/ .ant-form-item-control-wrapper{
  width: 100%;
}
/deep/ .ant-form-inline .ant-form-item-with-help{
  margin-bottom: 0;
}
</style>

